<script setup>

</script>

<template>
    <div class="iot_header">
        <div class="iot_h_top">
            <div class="iot_weekstate">
            <p>第一周</p>
            <p>2024-2025 上学期</p>
        </div>
        <div class="iot_setting">设置</div>
        </div>
        <div class="iot_h_buttom">
            <div class="iot_date">
                9月
            </div>
            <div class="iot_date">
                <p>一</p>
                <p>2</p>
            </div>
            <div class="iot_date">
                <p>二</p>
                <p>3</p>
            </div>
            <div class="iot_date">
                <p>三</p>
                <p>4</p>
            </div>
            <div class="iot_date">
                <p>四</p>
                <p>5</p>
            </div>
            <div class="iot_date">
                <p>五</p>
                <p>6</p>
            </div>
            <div class="iot_date">
                <p>六</p>
                <p>7</p>
            </div>
            <div class="iot_date">
                <p>日</p>
                <p>8</p>
            </div>
        </div>
    </div>
</template>

<style lang="css" scoped>
.iot_header {
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 0;
    position: fixed;
    width: 100%;
    height: 15vh;
    background-color: #BDE8CA;
}
.iot_h_top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 95%;
    height: 6vh;
}
.iot_h_buttom{
    width: 97%;
    height: 9vh;
}
.iot_weekstate>p:nth-child(1) {
    color: #E8B86D;
    font-size: larger;
    font-weight: bold;
}
.iot_weeekstate>p:nth-child(2) {
    color: #F5F7F8;
    /* color: red; */
    font-size: xx-small;
}
.iot_h_buttom{
    width: 100%;
    display: flex;
    justify-content: space-around;
    height: 100%;

}
.iot_date{
    width: 12vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.iot_date>p:nth-child(2){
    font-size: small;
    color: gray;
}
</style>